import React from 'react'
import { MccMeetingLogData } from '../../interface'
import { BackIcon, StyledWrap } from './style'
import { RangePicker, Input, Button } from '@kedacom/react-next'
import { SearchIcon } from '../../style'
import Table from '@/components/Table'
import useService from './service'
import LogDetailModal from '../../components/LogDetailModal'
import MeetingHeader from '@/components/MeetingHeader'
import { getUrlParams } from '@/utils'
import useInit from '@/hooks/useInit'
import { t } from 'i18next'

const data: MccMeetingLogData = {
	meeting_moid: getUrlParams('meetingMoid') ?? '',
	name: getUrlParams('meetingName') ?? '',
	creator: getUrlParams('meetingCreator') ?? '',
	start_time: getUrlParams('meetingStartTime') ?? '',
	end_time: getUrlParams('meetingEndTime') ?? '',
	integrity_check: getUrlParams('integrityCheck') ?? '',
}

export default function MccMeetingLogDetail() {
	useInit()
	const {
		columns,
		data: tableData,
		params,
		pager,
		isSearch,
		open,
		curData,
		setOpen,
		onSearch,
		changeParam,
		onPageChange,
		resetSettingParam,
		exportLog,
		backToList,
	} = useService(data)

	return (
		<>
			<MeetingHeader tabIndex={7} />
			<StyledWrap className="mcc-detail-page">
				<div className="nav">
					<BackIcon className="back-btn" onClick={backToList} />
					<span className="title">{t('会议管理日志')}</span>
				</div>
				<div className="info">
					<div className="line">
						<span className="label">{t('会议名称')}</span>
						<span className="value">{data.name}</span>
					</div>
					<div className="line">
						<span className="label">{t('会议发起人')}</span>
						<span className="value">{data.creator}</span>
						<span className="label time">{t('会议时间')}</span>
						<span className="value">
							{data.start_time} - {data.end_time}
						</span>
					</div>
				</div>
				<div className="operate-bar">
					<div className="search-bar">
						<Input
							className="operator-input"
							width={150}
							placeholder={t('操作人/登录的IP地址')}
							maxLength={16}
							value={params.operator}
							onChange={(e, val) => changeParam({ type: 'operator', payLoad: val })}
						/>
						<Input
							className="operational-input"
							width={150}
							placeholder={t('操作内容')}
							maxLength={40}
							value={params.operational}
							onChange={(e, val) => changeParam({ type: 'operational', payLoad: val })}
						/>
						<RangePicker
							className="date"
							value={[params.start_date, params.end_date]}
							maxDate={params.end_date}
							onChange={(e, arr) => {
								let startDate = arr[0] ?? '',
									endDate = arr[1] ?? ''
								startDate !== params.start_date &&
									changeParam({ type: 'start_date', payLoad: startDate })
								endDate !== params.end_date && changeParam({ type: 'end_date', payLoad: endDate })
							}}
							i18n={{
								confirm: t('确认'),
								year: t('年'),
								month: [
									t('一月'),
									t('二月'),
									t('三月'),
									t('四月'),
									t('五月'),
									t('六月'),
									t('七月'),
									t('八月'),
									t('九月'),
									t('十月'),
									t('十一月'),
									t('十二月'),
								],
								week: [t('日'), t('一'), t('二'), t('三'), t('四'), t('五'), t('六')],
							}}
						/>
						<SearchIcon className="search-btn" onClick={onSearch} />
						{isSearch && (
							<span className="total-msg">
								{t('相关搜索结果{{total}}个', { total: pager.total })}
								<span className="reset" onClick={resetSettingParam}>
									{t('清空筛选')}
								</span>
							</span>
						)}
					</div>
					<Button className="export-btn" onClick={exportLog}>
						{t('导出')}
					</Button>
				</div>
				<Table
					showSelectColumn={false}
					columns={columns}
					tableDataList={tableData}
					pager={pager}
					onPageChange={onPageChange}
					i18n={{ order: t('序号') }}
					nodata={t('暂无数据')}
				/>
				<LogDetailModal
					data={curData}
					open={open}
					type="mcc"
					meetingMoid={data.meeting_moid}
					setOpen={setOpen}
				/>
			</StyledWrap>
		</>
	)
}
